<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        Avatar
    </ui:define>

    <ui:define name="description">
        Avatar represents people using icons, labels and images.
    </ui:define>

    <ui:param name="documentationLink" value="/components/avatar"/>

    <ui:define name="implementation">
        <div class="grid">
            <div class="col-12 md:col-4">
                <div class="card">
                    <h5>Label</h5>
                    <p:avatar label="P" styleClass="mr-2" size="xlarge" />
                    <p:avatar label="V" styleClass="mr-2" size="large" style="background-color:#2196F3; color:#fff"/>
                    <p:avatar label="U" styleClass="mr-2" style="background-color:#9c27b0; color:#fff" />
                </div>
            </div>

            <div class="col-12 md:col-4">
                <div class="card">
                    <h5>Label - Circle</h5>
                    <p:avatar label="P" styleClass="mr-2" size="xlarge" shape="circle" />
                    <p:avatar label="V" styleClass="mr-2" size="large" style="background-color:#2196F3; color:#fff" shape="circle"  />
                    <p:avatar label="U" styleClass="mr-2" style="background-color:#9c27b0; color:#fff" shape="circle"  />
                </div>
            </div>

            <div class="col-12 md:col-4">
                <div class="card">
                    <h5>Label - Badge and Dynamic</h5>
                    <p:badge value="4">
                        <p:avatar label="U" size="xlarge" />
                    </p:badge>
                    <p:avatar label="PrimeFaces Rocks" dynamicColor="true" styleClass="ml-2" size="large"/>
                    <p:avatar label="Johann Chrysostom Wolfgang Amadeus Mozart" dynamicColor="true" lightness="80"
                              styleClass="ml-2" title="Wolfgang Amadeus Mozart"/>
                </div>
            </div>
        </div>

        <div class="grid">
            <div class="col-12 md:col-4">
                <div class="card">
                    <h5>Icon</h5>
                    <p:avatar icon="pi pi-user" styleClass="mr-2" size="xlarge" />
                    <p:avatar icon="pi pi-user" styleClass="mr-2" size="large" style="background-color:#2196F3; color:#fff"/>
                    <p:avatar icon="pi pi-user" styleClass="mr-2" style="background-color:#9c27b0; color:#fff" />
                </div>
            </div>

            <div class="col-12 md:col-4">
                <div class="card">
                    <h5>Icon - Circle</h5>
                    <p:avatar icon="pi pi-user" styleClass="mr-2" size="xlarge" shape="circle" />
                    <p:avatar icon="pi pi-user" styleClass="mr-2" size="large" style="background-color:#2196F3; color:#fff" shape="circle" />
                    <p:avatar icon="pi pi-user" styleClass="mr-2" style="background-color:#9c27b0; color:#fff" shape="circle" />
                </div>
            </div>

            <div class="col-12 md:col-4">
                <div class="card">
                    <h5>Icon - Badge</h5>
                    <p:badge value="4">
                        <p:avatar icon="pi pi-user" size="xlarge"/>
                    </p:badge>
                </div>
            </div>
        </div>

        <div class="grid">
            <div class="col-12 md:col-4">
                <div class="card">
                    <h5>Image</h5>
                    <p:avatar styleClass="mr-2" size="xlarge" shape="circle">
                        <p:graphicImage name="demo/images/avatar/amyelsner.png"/>
                    </p:avatar>
                    <p:avatar styleClass="mr-2" size="large" shape="circle">
                        <p:graphicImage name="demo/images/avatar/asiyajavayant.png"/>
                    </p:avatar>
                    <p:avatar styleClass="mr-2" shape="circle">
                        <p:graphicImage name="demo/images/avatar/onyamalimba.png"/>
                    </p:avatar>
                </div>
            </div>

            <div class="col-12 md:col-4">
                <div class="card">
                    <h5>Avatar Group</h5>
                    <p:avatarGroup styleClass="mb-3">
                        <p:avatar size="large" shape="circle">
                            <p:graphicImage name="demo/images/avatar/amyelsner.png"/>
                        </p:avatar>
                        <p:avatar size="large" shape="circle">
                            <p:graphicImage name="demo/images/avatar/asiyajavayant.png"/>
                        </p:avatar>
                        <p:avatar size="large" shape="circle">
                            <p:graphicImage name="demo/images/avatar/onyamalimba.png"/>
                        </p:avatar>
                        <p:avatar size="large" shape="circle">
                            <p:graphicImage name="demo/images/avatar/ionibowcher.png"/>
                        </p:avatar>
                        <p:avatar size="large" shape="circle">
                            <p:graphicImage name="demo/images/avatar/xuxuefeng.png"/>
                        </p:avatar>
                        <p:avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color:#fff" />
                    </p:avatarGroup>
                </div>
            </div>

            <div class="col-12 md:col-4">
                <div class="card">
                    <h5>Gravatar and fallback</h5>
                    <p:avatar styleClass="mr-2" size="xlarge" label="Walter">
                        <p:graphicImage name="demo/images/organization/walter.jpg"/>
                    </p:avatar>
                    <p:avatar gravatar="contact@primetek.com.tr" gravatarConfig="d=mp" size="large" styleClass="mr-2" />
                    <p:avatar gravatar="notfound@avatar.com" label="Not Found" styleClass="mr-2" />
                    <p:avatar icon="pi pi-user" styleClass="mr-2">
                        <p:graphicImage name="demo/images/organization/walter.jpg" rendered="false"/>
                    </p:avatar>
                </div>
            </div>
        </div>
    </ui:define>

</ui:composition>
